<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>java</title>
    <link rel="stylesheet" th:href="@{/css/myStyle.css}"/>
</head>
<body>
    <div class="n-head">
        <div class="g-doc f-cb">
            <div class="user">
                请<a href="/login">[登录]</a>
            </div>
            <ul class="nav">
                <li><a href="/">首页</a></li>
            </ul>
        </div>
    </div>
    <form class="m-form m-form-ht n-login" id="loginForm" onsubmit="return false;" autocomplete="off">
        <div class="fmitem">
            <label class="fmlab">用户名：</label>
            <div class="fmipt">
                <input class="u-ipt" name="userName" autofocus/>
            </div>
        </div>
        <div class="fmitem">
            <label class="fmlab">密码：</label>
            <div class="fmipt">
                <input class="u-ipt" type="password" name="password"/>
            </div>
        </div>
        <div class="fmitem fmitem-nolab fmitem-btn">
            <div class="fmipt">
                <button onclick="check()" type="submit" class="u-btn u-btn-primary u-btn-lg u-btn-block">登 录</button>
            </div>
        </div>
    </form>
    <div class="n-foot">
        <p>杭研有数：陈佳——在校作业</p>
    </div>
</body>
<script type="text/javascript" th:src="@{/js/md5.js}"></script>
<script>
    function check() {
        var username = document.getElementsByName("userName")[0].value;
        var password = document.getElementsByName("password")[0].value;

        var send = true;
        if(!username){
            document.getElementsByName("userName")[0].classList.add('z-err');
            send = false;
        }else {
            document.getElementsByName("userName")[0].classList.remove('z-err');
        }
        if(!password){
            document.getElementsByName("password")[0].classList.add('z-err');
            send = false;
        }else {
            document.getElementsByName("password")[0].classList.remove('z-err');
        }
        if(send){
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState === 4 && this.status === 200) {
                    if(this.responseText === "None"){
                        var tip = document.getElementById("tip");
                        if(!tip){
                            tip = document.createElement("div");
                            tip.innerHTML = "<div id='tip' class=\"v-load v-load-result\"><div class=\"load\"><i></i><b>登陆失败</b></div></div>";
                            document.body.appendChild(tip);
                        }else{
                            tip.style.display = "inline";
                        }
                        window.setTimeout(function () {
                            var tip = document.getElementById("tip");
                            tip.style.display = "none";
                        }, 1500);
                    }else{
                        window.location.href="/";
                    }
                }
            };
            xhttp.open("GET", "/account?userName=" + md5(username) + "&password=" + md5(password), true);
            xhttp.send();
        }

/*
        if(username === "buyer" && password === "reyub"){
            window.location.href="/indexBuyer";
        }else if(username === "seller" && password === "relles"){
            window.location.href="/indexSeller";
        }else{
            var tip = document.getElementById("tip");
            if(!tip){
                tip = document.createElement("div");
                tip.innerHTML = "<div id='tip' class=\"v-load v-load-result\"><div class=\"load\"><i></i><b>登陆失败</b></div></div>";
                document.body.appendChild(tip);
            }else{
                tip.style.display = "inline";
            }
            window.setTimeout(function () {
                var tip = document.getElementById("tip");
                tip.style.display = "none";
            }, 1500);
        }
*/
    }
</script>
</html>